<template>
  <div class="gl-mainBox"
       style="width: 100%;height: 100%;">
    <div class="content-item">
      <div>
        <span class="label">条件：</span>
        <el-select v-model="queryParams.schoolAreaId"
                   placeholder="--校区--"
                   @change="cascade('campus')"
                   size="small">
          <el-option v-for="(item, index) in campus"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.campusId"
                   placeholder="--园区--"
                   @change="cascade('gardens')"
                   size="small">
          <el-option v-for="(item, index) in gardens"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.buildingId"
                   placeholder="--楼栋--"
                   size="small">
          <el-option v-for="(item, index) in buildings"
                     :key="index"
                     :label="item.number + '栋' + item.unitNumber + '单元'"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.dataStatus"
                   placeholder="--状态--"
                   size="small">
          <el-option label="有效"
                     value=1>
          </el-option>
          <el-option label="无效"
                     value=0>
          </el-option>
        </el-select>
        <el-input size="small"
                  style="width: 200px;"
                  placeholder="输入房间号"
                  v-intercept:param="queryParams.roomNum"
                  v-model.trim="queryParams.roomNum" />
      </div>
      <div class="g-mt10">
        <el-button size="small"
                   type="primary"
                   @click="query()">搜索
        </el-button>
        <el-button size="small"
                   @click="reset">重置
        </el-button>
        <el-button size="small"
                   v-if="userInfo.roleName !== '年级辅导员'"
                   @click="add">新增
        </el-button>
      </div>
    </div>
    <div class="content-item">
      <el-table :data="tableData"
                class="table-header-gray">
        <el-table-column label="检查日期"
                         :formatter="formatTime"
                         prop="checkdate">
        </el-table-column>
        <el-table-column label="违章内容"
                         prop="content">
        </el-table-column>
        <el-table-column label="违章寝室"
                         prop="roomDetail">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <switch-vue :isActive="Boolean(scope.row.status)"
                        activeWord="有效"
                        offWord="无效"
                        @switchChange="switchChange(scope.row.id, scope.row.status)" />
          </template>
        </el-table-column>
      </el-table>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
    <dialog-new :detailShow="detailShow"
                :handleClose="handleClose"
                @handleConfirm="handleConfirm" />
  </div>
</template>

<script>
import { updateViolationStatusUsingPUT, listSchoolAreaByUserUsingGET, listCampusBySchoolAreaIdAndUserUsingGET, listBuildingByCampusIdAndUserUsingGET, listViolationUsingPOST } from '@api/auto'
import { formatTool, pagination } from '@/tools/mixin'
import dialogNew from './dialog'
export default {
  name: '',
  components: {
    dialogNew
  },
  mixins: [formatTool, pagination],
  data () {
    return {
      detailShow: false,
      total: 0,
      userInfo: {},
      queryParams: {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        roomNum: null,
        dataStatus: null
      },
      // 校区
      campus: [],
      // 园区
      gardens: [],
      // 楼栋
      buildings: [],
      // 楼层
      floors: [],
      tableData: []
    }
  },
  mounted () {
    this.userInfo = JSON.parse(sessionStorage.userInfo)
    this.listSchoolAreaByUserUsingGET()
    this.query()
  },
  methods: {
    cascade (type) {
      switch (type) {
        case 'campus':
          this.listCampusBySchoolAreaIdAndUserUsingGET()
          break
        case 'gardens':
          this.listBuildingByCampusIdAndUserUsingGET()
          break
      }
    },
    // 用户根据登陆用户查询可以查看的校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET()
        .then(res => {
          this.campus = res.data
        })
    },
    // 根据登陆用户查询指定校区下的园区
    listCampusBySchoolAreaIdAndUserUsingGET () {
      this.queryParams.campusId = null
      this.queryParams.buildingId = null
      this.buildings = []
      this.gardens = []
      listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId)
        .then(res => {
          this.gardens = res.data
        })
    },
    // 根据园区id和登陆用户查询管辖的楼栋
    listBuildingByCampusIdAndUserUsingGET () {
      this.queryParams.buildingId = null
      this.buildings = []
      listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId)
        .then(res => {
          this.buildings = res.data
        })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (!this.queryParams.roomNum) {
        this.queryParams.roomNum = null
      }
      listViolationUsingPOST(this.queryParams)
        .then(res => {
          this.total = (res.data && res.data.total) || 0
          this.tableData = (res.data && res.data.list) || []
        })
    },
    init () {
      this.queryParams = {
        size: 10,
        page: 1,
        schoolAreaId: null,
        campusId: null,
        buildingId: null,
        bedroomNum: null,
        dataStatus: null
      }
      this.gardens = []
      this.buildings = []
    },
    reset () {
      this.init()
      this.query()
    },
    add () {
      this.detailShow = true
    },
    handleClose () {
      this.detailShow = false
      this.query()
    },
    handleConfirm () { },
    switchChange (id, status) {
      let v = status === 0 ? 1 : 0
      updateViolationStatusUsingPUT(id, v)
        .then(() => {
          this.$message.success('操作成功')
          this.query()
        })
    }
  }
}
</script>
